/* vue */
import { defineComponent, PropType, watch } from 'vue'
import { CreateElement } from 'vue'
/* hooks */
import { useDialog } from '@hooks/useDialog'
/* util */
import { isAsyncFunction, isFalsy } from '@src/util/type'
import Log from '@src/util/log'
/* scss */
import '@src/modules/setting/messageChannel/components/qualification/dialog/base.scss'

enum QualificationBaseDialogEventEnum {
  Close = 'close',
  Confirm = 'confirm',
}

export default defineComponent({
  name: 'QualificationBaseDialog',
  props: {
    asyncConfirmFunction: {
      type: Function as PropType<() => Promise<boolean>>,
      default: null,
    },
    className: {
      type: String as PropType<string>,
      default: '',
    },
    confirmText: {
      type: String as PropType<string>,
      default: '确认',
    },
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    title: {
      type: String as PropType<string>,
      default: '',
    },
    visible: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    width: {
      type: String as PropType<string>,
    },
    onConfirm: {
      type: Function
    },
    onClose: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
    const { visible: insideVisible, showDialog, hideDialog } = useDialog()
    
    const onDialogCloseHandler = () => {
      emit(QualificationBaseDialogEventEnum.Close)
    }
    
    const onDialogConfirmHandler = () => {
      emit(QualificationBaseDialogEventEnum.Confirm)
    }
    
    watch(() => props.visible, (visible) => {
      if (visible) {
        showDialog()
      } else {
        hideDialog()
      }
    }, {
      immediate: true,
    })
    
    return {
      insideVisible,
      
      showDialog,
      hideDialog,
      
      onDialogCloseHandler,
      onDialogConfirmHandler,
    }
    
  },
  methods: {
    close() {
      this.hideDialog()
      this.onDialogCloseHandler()
    },
    /** 
     * @description 取消按钮点击事件
    */
    cancel() {
      this.hideDialog()
      this.onDialogCloseHandler()
    },
    /** 
     * @description 确认按钮点击事件
    */
    async confirm() {
      
      let confirmed = true
      
      if (isAsyncFunction(this.asyncConfirmFunction)) {
        confirmed = await this!.asyncConfirmFunction()
      }
      
      if (isFalsy(confirmed)) {
        Log.error('asyncConfirmFunction failed', this.confirm.name)
        return
      }
      
      this.onDialogConfirmHandler()
      
    },
    /**
    * @description 获取属性列表
    * @return {Record<string, any>} 属性列表
    */  
    getAttributes(): Record<string, any> {
      return {
        class: [
          this.className,
          'qualification-base-dialog'
        ],
        props: {
          title: this.title,
          show: this.insideVisible,
          width: this.width,
          appendToBody: true
        },
        on: {
          'update:show': () => {
            this.hideDialog()
            this.onDialogCloseHandler()
          }
        }
      }
    },
    /** 
     * @description 打开弹窗
    */
    open() {
      this.showDialog()
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <base-modal {...attrs}>
        
        { this.$slots.default }
        
        <div class="dialog-footer" slot="footer">
          
          <el-button 
            disabled={this.disabled}
            onClick={this.cancel}
            class="dialog-footer__cancel"
          >
            取消
          </el-button>
          
          {/* start 其他按钮 */}
          { this.$slots.button }
          {/* end 其他按钮 */}
          
          {/* start 确定按钮 */}
          <el-button 
            type="primary" 
            disabled={this.disabled}
            onClick={this.confirm}
          >
            { this.confirmText }
          </el-button>
          {/* end 确定按钮 */}
          
        </div>
        
      </base-modal>
    )
  }
})
